<template>
	<zero-custom-bar :effect="false" color="#fff" title='代驾服务'
		backgroundColor="linear-gradient(180deg, #FE9B23 0%, #FEA71D 100%)" :singleIcon="true"></zero-custom-bar>

	<view class="box">
		<view class="item" @click="openStartMap('start')">
			<text class="unit"></text>
			<text class="value slh" style="color: #FE9C24;">{{location.start.address || '输入代驾始发地'}}</text>
		</view>
		<view class="item" @click="openStartMap('end')">
			<text class="unit" style="background-color: #2B2B2B;"></text>
			<text class="value slh">{{location.end.address || '输入代驾目的地'}}</text>
		</view>
	</view>
	<view class="order" @click="bindProxyOrder">
		<view class="">
			<image src="../../static/order-icon.png" mode=""></image>
			<text>查看订单</text>
		</view>
		<image src="../../static/right.png" mode=""></image>
	</view>
</template>

<script setup>
	import {
		getSecondProduct
	} from '@/api'
	import {
		ref
	} from "vue";
	import {
		onLoad,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app'
	const location = ref({
		start: "",
		end: ""
	})
	const productInfoId = ref()
	onLoad(()=>{
		getData()
	})
	const getData = async()=>{
		const res = await getSecondProduct({productId:6})
		productInfoId.value = res.result[0].id
	}
	/** 选择地址 */
	const openStartMap = (key) => {
		if (key === 'end' && !location.value.start) {
			uni.showToast({
				title: '请选择始发地',
				icon: "none"
			})
			return false
		}
		uni.chooseLocation({
			success: function(res) {
				if (key === 'start') {
					location.value.start = res
				}
				if (key === 'end') {
					location.value.end = res
					uni.navigateTo({
						url: "/pages/proxyNext/proxyNext?productInfoId="+productInfoId.value+'&start='+location.value.start.address+'&end='+location.value.end.address
					})
				}
			}
		});
	}
	/** 查看订单 */
	const bindProxyOrder = () => {
		uni.navigateTo({
			url: "/pages/proxyOrder/proxyOrder"
		})
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #FE9B23 0%, #FFB32B, #F7F4F0 49%, ) no-repeat;
		padding-bottom: constant(safe-area-inset-bottom);

		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		background-attachment: fixed
	}

	.box {
		width: 702rpx;
		height: 269rpx;
		padding: 30rpx 0;
		background: #FFFFFF;
		border-radius: 28rpx;
		margin: 57rpx auto;
		overflow: hidden;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;

		.item {
			width: 641rpx;
			height: 91rpx;
			background: #F2F2F2;
			border-radius: 28rpx;
			border: 1px solid #ADADAD;
			display: flex;
			align-items: center;

			.unit {
				width: 12rpx;
				height: 12rpx;
				background: #FE9C24;
				border-radius: 50%;
				display: block;
				margin-left: 30rpx;
			}

			.value {
				font-weight: bold;
				font-size: 30rpx;
				color: #2B2B2B;
				margin-left: 20rpx;
				width: 500rpx;
			}
		}
	}

	.order {
		width: 702rpx;
		height: 98rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		margin: 26rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;

		>view {
			display: flex;
			align-items: center;

			image {
				width: 26rpx;
				height: 30rpx;
				display: block;
				margin-left: 45rpx;
			}

			text {
				font-size: 28rpx;
				color: #2B2B2B;
				margin-left: 17rpx;
			}
		}

		>image {
			display: block;
			width: 38rpx;
			height: 38rpx;
			margin-right: 30rpx;
		}
	}
</style>